<template>
  <div class="category">
    <nav-bar class="category-bar">
      <div slot="center">分类</div>
    </nav-bar>
    <div class="content">
      <scroll class="sc-menu">
          <cate-menu :menu="category" @selectItem="selectItem" />
      </scroll>
      
      <scroll class="scroll">
          <cate-content :subcategory="subcategory"/>
      </scroll>
    </div>
  </div>
</template>
<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll";

import CateMenu from "./childComps/CateMenu";
import CateContent from "./childComps/CateContent";
import { _getCateGory, _getSubCategory } from "network/category";
export default {
  name: "CateGory",
  data() {
    return {
      category: null,
      subcategory: null,
      currentIndex: 0
    };
  },
  components: {
    NavBar,
    Scroll,

    CateMenu,
    CateContent
  },
  created() {
    /**分类信息 */
    _getCateGory().then(res => {
      this.category = res.data.category.list;

      /**默认展示的类别 */
      this.getSubCategory(this.currentIndex);
    });
  },
  methods: {
    selectItem(index) {
      this.getSubCategory(index);
    },
    getSubCategory(currentIndex) {
      this.currentIndex = currentIndex;
      let maitKey = this.category[this.currentIndex].maitKey;
      _getSubCategory(maitKey).then(res => {
        this.subcategory = res.data.list;
        console.log(this.getsubcategory);
      });
    }
  },
  computed: {}
};
</script>
<style scoped>
.category {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.category-bar {
  background: var(--color-tint);
  font-size: 16px;
  color: #fff;
  position: relative;
  top: 0px;
  z-index: 1;
}
.content {
  display: flex;
  height: calc(100% - 44px - 49px);
}
.scroll{
    width: 75%;
}
.sc-menu{
    width: 25%;
}
</style>